<style scoped>
</style>
<template>
<div class="logo">
    <div class="top">
        <span>登录</span>
    </div>
    <el-form  :label-position="'right'" :model="ruleForm" ref="ruleForm" status-icon label-width="70px" class="demo-ruleForm">
        <el-form-item label="用户名">
            <el-input type="text" v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input type="password" v-model="ruleForm.password"  @keyup.enter.native="submitForm(ruleForm)"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="warning" @click="submitForm(ruleForm)">提交</el-button>
        </el-form-item>
        <el-form-item class="text">
            还没有注册? <a href="javascript:;" @click="gotozhuce">马上注册</a>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    data (){
        return {
            ruleForm: {
                password: '',
                username: '',
            },
        }
    },
    methods:{
        submitForm(val){
            console.log(val);
            if(val.password ==''){
                this.$message({
                    message: '密码不能为空',
                    type: 'warning'
                  });
            }
            if(val.password =='' && val.username==''){
                this.$message({
                    message: '账号和密码没有填写哦~',
                    type: 'warning'
                  });
            }else{
                this.$http.post('/api/login',{
                    username:val.username,
                    password:val.password
                }).then((data)=>{
                    console.log(data.data)
                    if(data.data.code){
                        this.$message({
                            message:data.data.msg,
                            type: 'warning'
                        });
                    }else{
                        this.$message({
                            message: '登录成功~',
                            type: 'success'
                        });
                        console.log(data);
                        // 设置vuex
                        let msg = JSON.stringify(data.data.token);
                        console.log(msg);
                        this.$store.commit('qiantai/setToKen',msg);
                        console.log(this.$router);
                        this.$emit('douxiaoshi');
                    }   
                })
            }
        },
        gotozhuce(){
            console.log('ccc');
            this.$emit('gotozhuce')
        }
    }
}
</script>